<template>
  <el-dialog
    v-model="open" title="付款" width="800px" append-to-body :close-on-click-modal="false"
    @close="cancel"
  >
    <el-form ref="payRef" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="场地/时间">
        <el-tag v-for="(tag,index) in form.orderList" :key="index" class="checkedPlace">
          {{ tag.siteName }}:
          <br>
          {{ tag.orderTime.split(',').join('-') }}
        </el-tag>
      </el-form-item>
      <el-form-item label="原价">
        <span class="cRed">￥{{ form.orderAmount }}</span>
      </el-form-item>
      <el-form-item label="会员价">
        <span class="cRed">￥{{ form.memberPrice }}</span>
      </el-form-item>
      <el-form-item v-if="form.payType=='2'" label="折扣价">
        <span class="cRed">￥{{ form.discountPrice }}</span>
      </el-form-item>
      <el-form-item v-if="form.orderPersonType=='0'" label="会员卡号" prop="memberCardCode">
        <el-input v-model="form.memberCardCode" readonly />
      </el-form-item>
      <el-form-item label="预订人" prop="orderName">
        <el-input v-model="form.orderName" placeholder="预订人姓名" readonly />
      </el-form-item>
      <el-form-item label="电话" prop="orderTelno">
        <el-input v-model="form.orderTelno" type="number" placeholder="预订人电话" readonly />
      </el-form-item>
      <el-form-item label="支付价格" prop="finalOrderAmount">
        <el-input v-model="form.finalOrderAmount" type="number" placeholder="支付价格(可修改)" />
      </el-form-item>
      <el-form-item label="支付方式" prop="payType" @change="changePayType">
        <el-radio-group v-model="form.payType">
          <el-radio label="0" border>扫码</el-radio>
          <el-radio label="1" border>现金</el-radio>
          <el-radio v-if="form.orderPersonType=='0'" label="2" border>余额</el-radio>
          <el-radio label="3" border>银联</el-radio>
          <el-radio label="4" border>支付宝</el-radio>
          <el-radio label="5" border>微信</el-radio>
          <el-radio label="6" border>其他</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="订单备注">
        <el-input v-model="form.remark" type="textarea" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="warning" @click="submitForm">直接付款（￥{{ form.finalOrderAmount }}）</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { getCurrentInstance, reactive } from '@vue/runtime-core'
import { toRefs } from '@vueuse/shared'
import { computed } from '@vue/reactivity'
import { getGenerdatePrice, payForOrder, backGetInfo } from '@/api/ven/reserve'
import { watch } from 'vue'


const { proxy } = getCurrentInstance()
const emit = defineEmits(['update:modelValue', 'submitForm'])

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  data: {
    type: Object,
    default: () => {}
  }
})

const data = reactive({
  form: { },
  rules: {
    finalOrderAmount: [{ required: true, message: '必填', trigger: 'blur' }, {
      validator: (rule, value, callback) => {
        if (parseFloat(value) < 0) {
          callback('价格有误')
          return
        }
        callback()
      },
      trigger: 'blur'
    }],
    payType: { required: true, message: '必填', trigger: 'change' }
  }
})
const { form, rules } = toRefs(data)

const open = computed({
  get: () => props.modelValue,
  set: () => { }
})
watch(open, (val) => {
  if (val) {
    if (props.data.parentType == '2') {
      // 子订单
      backGetInfo(props.data.id).then(res => {
        // 获取父订单信息
        form.value = res.data
        form.value.orderList = []
        for (var s of form.value.sonList) {
          var jj = {
            siteName: s.siteName,
            siteId: s.siteId,
            orderTime: s.orderTimePeriod,
            orderDate: s.orderDate
          }
          form.value.orderList.push(jj)
        }
        getPriceArr()
      })
    } else {
      form.value = props.data
      form.value.orderList = [{
        siteName: form.value.siteName,
        siteId: form.value.siteId,
        orderTime: form.value.orderTimePeriod,
        orderDate: form.value.orderDate
      }]
      getPriceArr()
    }
  } else {
    proxy.resetForm('payRef')
  }
})

function getPriceArr() {
  getGenerdatePrice(form.value.orderList, form.value.memberCardCode, form.value.payType).then(res => {
    let nomalPrice = 0
    let memberPrice = 0
    let discountPrice = 0

	_.each(res.data[0], (o) => {
	  nomalPrice += parseFloat(o)
	})
	_.each(res.data[1], (o) => {
	  memberPrice += parseFloat(o)
	})
	_.each(res.data[2], (o) => {
	  discountPrice += parseFloat(o)
	})

  //   nomalPrice = parseFloat(res.data[0])
  //   memberPrice = parseFloat(res.data[1])
  //   discountPrice = parseFloat(res.data[2])

    form.value.orderAmount = nomalPrice.toFixed(2)
    form.value.memberPrice = memberPrice.toFixed(2)
    form.value.discountPrice = discountPrice.toFixed(2)
    if (!form.value.memberCardCode) {
      form.value.finalOrderAmount = form.value.orderAmount
    } else {
      if (form.value.payType === '2') {
        form.value.finalOrderAmount = form.value.discountPrice
      } else {
        form.value.finalOrderAmount = form.value.memberPrice
      }
    }
  })
}

function changePayType() {
  // 切换支付方式时，重新获取价格
  if (form.value.memberCardCode) {
    if (form.value.payType == '2') {
      form.value.finalOrderAmount = form.value.discountPrice
    } else {
      form.value.finalOrderAmount = form.value.memberPrice
    }
  }
}

function submitForm(type) {
  form.value.submitType = type
  proxy.$refs['payRef'].validate((valid) => {
    if (valid) {
      proxy.$modal.confirm('确定付款？')
        .then(() => {
          payForOrder(form.value.id, {
            orderAmount: form.value.finalOrderAmount,
            payType: form.value.payType
          }).then(() => {
            proxy.$modal.msgSuccess('付款成功')
            emit('update:modelValue', false)
            emit('submitForm')
          })
        })
    }
  })
}

function cancel() {
  emit('update:modelValue', false)
}

</script>

<style scoped>

</style>
